<template>
  <div class="container">
    <!-- 搜索框 -->
    <div class="search">
      <div class="news">
        <span class="iconfont iconnew"></span>
      </div>
      <div class="searchipt">
        <span class="iconfont iconsearch"></span>
        <i>搜索新闻</i>
      </div>
      <div class="home" @click="$router.push('/personal')">
        <span class="iconfont iconwode"></span>
      </div>
    </div>
    <!-- tab切换 -->
    <van-tabs v-model="active" sticky swipeable @click="getpost">
      <van-tab v-for="(value,index) in categorylist" :title="value.name" :key="index">
        <!--只有一张图片 -->
        <van-list v-model="loading" :finished="finished" finished-text="我也是有底线的" @load="onLoad">
          <div v-for="(value,index) in list" :key="index">
            <postItem1
              v-show="value.type==1 && value.cover.length>0 &&value.cover.length<3"
              :title="value.title"
              :nickname="value.user.nickname"
              :comment_length="value.comment_length"
              :src="value.cover[0].url"
              v-if="value.user"
            ></postItem1>
            <!-- 可以放置三张图片 -->
            <postItem2
              v-show="value.type==1&&value.cover.length>=3"
              :titel="value.title"
              :nickname="value.user.nickname"
              :comment_length="value.comment_length"
              :src="value.cover"
              v-if="value.user"
            ></postItem2>
            <!-- 可以放置视频 -->
            <postItem3
              v-if="value.type==2"
              :title="value.title"
              :src="value.cover[0].url"
              :nickname="value.nickname"
              :comment_length="value.comment_length"
            ></postItem3>
          </div>
        </van-list>
        <!-- 有三张图片的组件 -->
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import postItem1 from "../components/postitem1";
import postItem2 from "../components/postItem2";
import postItem3 from "../components/postItem3";
export default {
  data() {
    return {
      // categorylist:['关注','头条','娱乐','体育','汽车','房产','关注','头条','娱乐','体育','汽车','房产','V'],
      categorylist: [],
      list: [],
      active: 1,
      loading: false,
      finished: false,
    };
  },
  components: {
    postItem1,
    postItem2,
    postItem3,
  },
  watch: {
    active() {
      if (this.active === this.categorylist.length - 1) {
        this.$router.push("/manage");
      }
    },
  },
  methods: {
    onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 3; i++) {
          this.list.push(1);
        }
        // 加载状态结束
        this.loading = false;
        // 数据全部加载完成
        if (this.list.length >= 10) {
          this.finished = true;
        }
      }, 3000);
    },
    getpost() {
      // 当前激活分类,是在分类列表中拿出当前激活的索引
      const currentCategory = this.categorylist[this.active];
      // 从中获取 id
      const categoryId = currentCategory.id;
      this.$axios({
        url: "/post",
        params: {
          category: categoryId,
        },
      }).then((res) => {
        console.log(res.data);
        const { data } = res.data;
        this.list = data;
      });
    },
    // 获取到列表栏的封装函数
    getcage(token) {
      const config = {
        url: "/category",
      };
      if (token) {
        config.headers = {
          AUthorization: "Bearer " + token,
        };
      }
      this.$axios(config).then((res) => {
        // console.log(res);
        const { data } = res.data;
        // console.log(data);
        data.push({
          name: "V",
        });
        this.categorylist = data;
        // 并且吧这份栏目列表单保存到本地
        localStorage.setItem("categorylist", JSON.stringify(data));
      });
    },
  },
  mounted() {
    // 进入页面加载的时候。判断是否本地有数据
    const categorylist = localStorage.getItem(categorylist);
    const token = localStorage.getItem("token");
    console.log(token);
    if (categorylist) {
      if (categorylist[0].name == "关注" && !token) {
        this.getcage();
        return;
      }
      if (categorylist[0].name !== "关注" && token) {
        this.getcage();
        return;
      }
      this.categorylist = categorylist;
    } else {
      this.getcage(token);
    }
    this.$axios({
      url: "/post",
      param: {
        category: "999",
      },
    }).then((res) => {
      console.log(res);
      const { data } = res.data;
      this.list = data;
    });
  },
};
</script>

<style scoped lang='less'>
@import url("http://at.alicdn.com/t/font_1426139_h6vn3jbl5q.css");
.search {
  width: 360/360 * 100vw;
  height: 49/360 * 100vw;
  background-color: rgba(255, 0, 0, 1);
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15/360 * 100vw;
  box-sizing: border-box;
  .news {
    width: 54/360 * 100vw;
    height: 54/360 * 100vw;
    .iconnew {
      font-size: 54/360 * 100vw;
      color: #fff;
    }
  }
  .searchipt {
    // flex: 1;
    width: 210/360 * 100vw;
    height: 34/360 * 100vw;
    background-color: rgba(225, 225, 225, 0.5);
    border: none;
    outline: none;
    color: #fff;
    border-radius: 17/360 * 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .home {
    width: 32/360 * 100vw;
    height: 32/360 * 100vw;
    .iconwode {
      font-size: 32/360 * 100vw;
      color: #fff;
    }
  }
}
/deep/.van-tab:nth-last-child(2) {
  background-color: #eee;
  width: 20px !important;
  position: absolute;
  right: 0;
  top: 10px;
  border-bottom: none;
}
/deep/ .van-tabs__nav {
  position: static;
  background-color: #eee;
}
/deep/.van-tabs__line {
  display: none;
}
/deep/.van-tab--active {
  border-bottom: 2px solid red;
}
/deep/.van-tab--active:nth-last-child(2) {
  border-bottom: none;
}
</style>